<template>
	<view>
		<my-search @click.native="gotosearch" />
		<view class="scroll-view-container">
			<!-- 左侧的滚动视图区域 -->
			<scroll-view class="left-scroll-view" scroll-y :style="{height: wxh+'px'}">
				<block v-for="(item,index) in cateList" :key="index">
					<view :class="['left-scroll-view-item',index===active?'active':'']" @click="activeChanged(index)">{{item.cat_name}}</view>
					<!-- 第二种写法 -->
					<!-- <view :class="['left-scroll-view-item',index===active?'active':'']" @click="activeChanged(index)">{{item.cat_name}}</view> -->
				</block>
			</scroll-view>
			<scroll-view class="right-scroll-view" scroll-y :style="{height: wxh+'px'}" :scroll-top="scrolltop">
				<view class="cate-lv2" v-for="(item,index) in cateList2" :key="index">
					<view class="cate-lv2-title">
						/{{item.cat_name}}/
					</view>
					<!-- 动态渲染三级列表 -->
					<view class="cate-lv3-list">
						<view class="cate-lv3-list-item" v-for="(itm,idx) in item.children" @click="gotoGoodsDetail(itm)">
							<image :src="itm.cat_icon" mode=""></image>
							<text>{{itm.cat_name}}</text>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import badgeMix from '../../mixins/tabbar-badge.js.js'
	export default {
		// 将badgeMix混入到当前的页面中进行使用
		mixins: [badgeMix],
		data() {
			return {
				wxh: 0,
				// 存放分类列表的内容
				cateList: [],
				// 存放二级分类列表内容
				cateList2: [],
				// active,点击激活的列表样式加深
				active: 0,
				// 每次切换之后，滚动条位置要置顶
				scrolltop: 0
			};
		},
		// 小程序生命周期函数
		onLoad() {
			// console.log(uni.getSystemInfoSync())获取手机系统信息的api
			const sysinfo = uni.getSystemInfoSync();
			console.log(sysinfo);
			// this.wxh = uni.getSystemInfoSync().windowHeight
			this.wxh = sysinfo.windowHeight - 50;
			this.getcateList();
		},
		methods: {
			// 获取分类数据的方法
			async getcateList() {
				const {
					data: res
				} = await uni.$http.get('/api/public/v1/categories')
				console.log(res);
				this.cateList = res.message
				// 为二级分类设置默认值
				this.cateList2 = this.cateList[0].children
			},
			// 切换分类的函数
			activeChanged(index) {
				this.active = index
				// 点击切换的时候，将需要展示的二级分类数据进行变更
				this.cateList2 = this.cateList[index].children
				// this.scrollTop=0
				this.scrolltop = this.scrolltop === 0 ? 1 : 0
			},
			// 点击每个商品跳转到商品详情页
			gotoGoodsDetail(itm) {
				uni.navigateTo({
					url: '/subpkg/goods_detail/goods_detail?cid=' + itm.cat_id
				})
			},
			gotosearch() {
				// 子传父的方法需要熟悉一下
				// console.log('ok')
				uni.navigateTo({
					url: '../../subpkg/search/search'
				})
			}

		}
	}
</script>

<style lang="scss">
	.scroll-view-container {
		display: flex;

		.left-scroll-view {
			width: 120px;
		}

		.left-scroll-view-item {
			background-color: #F7F7F7;
			line-height: 60px;
			text-align: center;
			font-size: 12px;

			&.active {
				//激活项样式
				background-color: #FFFFFF;
				position: relative;

				&::before {
					content: '';
					display: block;
					height: 30px;
					width: 3px;
					background-color: #C00000;
					position: absolute;
					top: 50%;
					transform: translateY(-50%);
				}
			}
		}

		.right-scroll-view {
			.cate-lv2-title {
				font-size: 12px;
				font-weight: 700;
				text-align: center;
				padding: 15px 0;
			}

			.cate-lv3-list {
				display: flex;
				flex-wrap: wrap;

				.cate-lv3-list-item {
					width: 33.3%;
					display: flex;
					flex-direction: column;
					text-align: center;
					// // justify-content: space-around;
					align-items: center;
					margin-bottom: 10px;

					image {
						width: 60px;
						height: 60px;
					}

					text {
						font-size: 12px;
					}
				}
			}
		}

	}
</style>
